<template>
<div>
	<Card  dis-hover>
		<p slot="title">管理会员</p>
		<div pd2>
			<p>
				<Button size="small" @click="handleShowCreateMemberModal(null)">添加会员</Button>
				<Button size="small" mgl1 @click="handleDeleteBatch">批量删除</Button>
			</p>
			<AutoTable ref="auto-table" action="/api/services/app/Member/Search" :columns="columns" :query="query" :buttons="buttons" mgt1></AutoTable>
		</div>
	</Card>
	<create-member v-model="showCreateMemberModal" :model="model"  @save-success="getpage"></create-member>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoTable from "@common/components/AutoTable.vue";
import CreateMember from './create-member.vue'

@Component({
	components:{AutoTable, CreateMember }
})
export default class MemberManager extends AbpBase {
	showCreateMemberModal:boolean=false;
	showShoppingOptionsModal:boolean=false;
	model:any = this.getDefaultModel();
	getDefaultModel() {
		return {
			userName: "",
			name: "",
			resetPassword: true,
			password: "",
			phoneNumber: "",
			emailAddress: "",
			head: "",
			level: 1,
			xpValue: 0,
			groups: [],
			remark: "",
			status: 0
		};
	}
	get buttons() {
		return ['search','search_all']
	}
	get query() {
		// var commodityWareOptions = this.$store.state.setting.settings.commodityWares.reduce((result, elem) => { 
		// 	result.push({ value: elem.id, label: elem.name });
		// 	return result;
		// }, [{ value: 0, label: "全部" }]);
		return { // 查询条件
			searchTarget: { type: "select", default: "name", options: [
					{ value: "username", label: "用户名" },
					{ value: "name", label: "姓名" },
					{ value: "phonenumber", label: "手机" },
					{ value: "emailaddress", label: "邮箱" },
			] },
			search: { type: "input", placeholder: "关键字" },
			// status: { type: "select", label: "审核状态", default: -1, options: [
			// 		{ value: -1, label: "所有" },
			// 		{ value: 0, label: "未审核" },
			// 		{ value: 1, label: "审核通过" },
			// 		{ value: 2, label: "审核未过" },
			// ] },
			//commodityWareId: { type: "select", label: "产品库:", default: 0, placeholder: "未选择", options: commodityWareOptions }
		};
	}
	get columns() {
		return [
			{
				type: 'selection', width: 50, align: 'center'
			},
			{
				title: '#', align: 'center', width: 50, type: 'index'
			},
			{
				title: '用户名', align: 'center', key: 'userName'
			},
			{
				title: '姓名', align: 'center', key: 'name'
			},
			{
				title: '手机', align: 'center', key: 'phoneNumber'
			},
			{
				title: '邮箱', align: 'center', key: 'emailAddress'
			},
			// {
			// 	title: '会员等级', align: 'center', key: 'level'
			// },
			{
				title: '当前积分', align: 'center', width: 80, key: 'xpValue'
			},
			// {
			// 	title: '所在分组', align: 'center', key: 'groups'
			// },
			{
				title: '注册时间', align: 'center', render: (h, params) => {
					return h('div', this.formatTimeStr(params.row.creationTime));
				}
			},
			{
				title: '备注', key: 'remark'
			},
			{
				title: '操作', key: 'action', align: 'center', width: 120, render: (h, params) => {
					return h('div', [
						h('Button', {
							props: { type: 'primary', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => { this.handleShowCreateMemberModal(params.row); } }
						}, '编辑'),
						h('Button', {
							props: { type: 'error', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleDelete(params.row.id);
							} }
						}, '删除')
					]);
				}
			}
		]
	}
	async handleShowCreateMemberModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
		}else {
			var response = await this.get('Member/Get', { id: item.id });
			if(response.success) {
				this.model = Object.assign({ password: "", resetPassword: false }, response.result);
			}else {
				return;
			}
		}
		this.showCreateMemberModal = true;
	}
	handleDelete(id:Number) {
		this.confirm('确认删除该会员吗？', async () => {
			var response = await this.post('Member/Delete', { id: id });
			if(response.success) {
				this.getpage();
			}
		});
	}
	async handleDeleteBatch() {
		var selection = (this.$refs["auto-table"] as any).table.getSelection();
		if(selection.length == 0) {
			this.confirm('未选中任何会员', () => {});
			return;
		}
		this.confirm(`确认要删除选中的${selection.length}件会员吗`, async () => {
			var ids = selection.map(elem => elem.id);
			var response = await this.post('Member/Delete', { ids: ids });
			if(response.success) {
				this.getpage();
			}
		});
	}
	getpage() {
		(this.$refs["auto-table"] as any).getData();
	}
}
</script>